<template>
	<view class="w100 flex flex_jc flex_wrap">
		<view class="bg_img">
			<u-image width="100%" height="100%" :src="card_url"></u-image>
		</view>
		
		<view class="tips mt30 txt_c w550" v-if="type=='share'">
			<view>您的好友赠送给你了一张</view>
			<view><{{danshu}}></view>
			<view>卡牌</view>
		</view>
		
		<view class="tips mt30 txt_c w550" v-if="type=='ask'">
			<view>您的好友向您索要了一张</view>
			<view><{{danshu}}></view>
			<view>卡牌</view>
		</view>
		
		<view class="tips mt30 txt_c w550" v-if="type=='zhuli'">
			<view>您的好友需要您的助力</view>
			<view><{{danshu}}></view>
			<view>卡牌</view>
		</view>
		
		<view class="kapai_box w100 flex flex_jc mt30">
			<view class="kapai flex flex_ac flex_jc">
				<view class="card flex flex_ac flex_jc">
					
					<view class="card3 flex flex_ac flex_jc">
						<image style="width: 100%;height: 100%;" :src="card_url"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn mt30" v-if="type=='zhuli'" @click="saveZhuli()">为他助力</view>
		<view class="btn mt30" v-if="type=='share'" @click="saveShare()">开心收下</view>
		<view class="btn mt30" v-if="type=='ask'" @click="saveShare()">送给好友</view>
		<view class="btn" @click="goIndex()" style="background-color: #e3c73c;margin-top: 70rpx;">回到首页</view>
	</view>
</template>

<script>
	import {getKapaiDetail,saveShare,saveZhuli} from "@/api/api"
	export default {
		data() {
			return {
				card_id:0,
				share_user_id:0,
				type:'',
				card_url:'',
				danshu:'',
				code:'',
				is_login:false,
				
			}
		},
		
		
		onLoad: function (option) {
			this.code = option.code
			this.card_id = option.card_id
			this.share_user_id = option.share_user_id
			this.type = option.typezz
			this.getKapaiDetail()
		},
		
		onShow:function(){
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
			
		},
	
		methods:{
			goIndex(){
				
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			saveShare(){
				if(this.isLogin()){
					var data={
						code:this.code,
						user_id:this.share_user_id,
						card_id:this.card_id,
						type:this.type
					}
					saveShare(data).then(res=>{
						this.msg(res.msg)
					})
				}
			},
			
			saveZhuli(){
				if(this.isLogin()){
					var data={
						code:this.code,
						user_id:this.share_user_id,
						card_id:this.card_id,
						type:this.type
					}
					saveZhuli(data).then(res=>{
						this.msg(res.msg)
					})
				}
			},
		
			getKapaiDetail(){
				getKapaiDetail(this.card_id).then(res=>{
					this.card_url = res.data.card
					this.danshu = res.data.danshu
				})
			},
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
			isLogin(){
				if(this.is_login){
					return true
				}else{
					//登录
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
			},
		}
	}
</script>
<style>
	.u-transition{width: 100%;height: 100%;}
</style>
<style scoped>
	.btn{width: 400rpx;height: 80rpx;border-radius: 10rpx;background-color: #3c67e3;z-index: 2;color: #FFFFFF;
		text-align: center;line-height: 80rpx;letter-spacing: 5rpx;box-shadow: 0 2px 6px 0 rgb(0 0 0 / 42%);
		font-size: 40rpx;font-weight: bold;}
		
	.tips{z-index: 2;font-size: 40rpx;font-weight: bold;color : #f3ed4d;text-shadow: 0 0 10px #f1ee97,0 0 20px #f1ee97,0 0 30px #f1ee97,0 0 40px #f1ee97;}
	.bg_img{height: 100vh;width: 100vw;background-repeat: no-repeat;background-position: center;
				background-size: cover;-webkit-filter: blur(10px);-moz-filter: blur(10px);-o-filter: blur(10px);
				-ms-filter: blur(10px);filter: blur(10px);z-index: 1;position: fixed;}
	.kapai_box{z-index: 2;}
	.card2 image{width: 420rpx;height: 177rpx;}
	.animation{animation: card_turn 5s;}
	.card3{width: 100%;height: 100%;position: absolute;z-index: 10;}
	.card2{width: 100%;height: 100%;background-color: #212534;color: #FEB756;
			box-shadow: -6px -6px 20px rgba(255, 255, 255, 1),6px 6px 20px rgba(0, 0, 0, .1); 
			letter-spacing: 10rpx;position: absolute;z-index: 4;}
	.card::after{width: 800rpx;height: 800rpx; background-image: linear-gradient( #5ddcff,#3c67e3,#4e00c2 ); animation: spin 2.5s linear infinite;
		z-index: -1;position: absolute;content: '';}
	.kapai .card{width: 420rpx;height: 600rpx;position: relative;border-radius: 15rpx;background-color: #F5F5F5;}
	.kapai{width: 420rpx;height: 600rpx;border-radius: 15rpx;position: relative;padding: 20rpx;overflow: hidden;}
	
	@keyframes spin{
		0%{
			transform: rotate(0);
		}
		100%{
			transform: rotate(359deg);
		}
	}
	
	
	@keyframes card_turn{
		0%{
			transform: rotateY(0deg);
		}
	
		
		100%{
			transform: rotateY(10799deg);
			z-index: 5;
			background-color: #FFFFFF;
		}
	
	}
</style>